import { h, nextTick, resolveComponent } from "../vue.js"
import { send } from '../client.js'

export default ctx => {
  ctx.page({
    name: '指令日志',
    path: '/lnnbot_command_logs',
    authority: 2,
    component: {
      render(_ctx, _cache, $props, $setup, $data, $options) {
        return h(resolveComponent("k-layout"), { /*menu: "lnnbot_command_logs"*/ }, [
          h("pre", { ref: "pre", style: "margin:0;height:100%;font-size:1em;padding:1em;box-sizing:border-box;overflow-y:scroll;white-space:pre-wrap;word-break:break-all" }, [$data.logs.join("\n")]),
        ])
      },
      data: () => ({
        logs: ["加载…"],
        handle: 0,
      }),
      mounted() {
        this.refresh()
        /*ctx.action("lnnbot_command_logs.refresh", {
          shortcut: "ctrl+r",
          action: () => {
            this.refresh()
          },
        })*/
        ;(async () => {
          while (true) {
            await new Promise(resolve => this.handle = setTimeout(resolve, 1000))
            await this.refresh()
          }
        })()
      },
      methods: {
        async refresh() {
          const { pre } = this.$refs
          const doScroll = pre.scrollTop + pre.clientHeight >= pre.scrollHeight - 1
          this.logs = await send("get-lnnbot-command-logs")
          if (doScroll) nextTick(() => { pre.scrollTo(0, pre.scrollHeight) })
        },
      },
    },
  })
  /*ctx.menu("lnnbot_command_logs", [
    {
      id: "lnnbot_command_logs.refresh",
      icon: "refresh",
      label: "刷新",
    },
  ])*/
}
